<template>
  <div class="w">
    <!-- 表单区 -->
    <Form
      style="padding-top: 25px;"
      name="form" 
      ref="formRef" 
      :labelCol="labelCol" 
      :wrapperCol="wrapperCol" 
      :initialValues="form"
      @finish="formFinish">

      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="firmName" label="厂商名称" :rules="formRules.firmName">
            <Input placeholder="请输入厂商名称" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="address" label="厂商地址" :rules="formRules.address">
            <Input placeholder="请输入厂商地址" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="remark" label="厂商简介">
            <TextArea placeholder="请输入厂商简介" style="width: 100%; height: 200px;" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="isInCatalog" label="是否在信创目录内" initialValue="否">
            <RadioGroup :options="['是', '否']" name="isInCatalog" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="linkMan" label="厂商联系人" :rules="formRules.linkMan">
            <Input placeholder="请输入厂商联系人" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="20" :offset="0">
          <FormItem name="linkPhone" label="联系人电话" :rules="formRules.linkPhone">
            <Input placeholder="请输入联系人电话" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row style="margin-top: 25px;">
        <Col :span="12" :offset="6">
          <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
            <Button style="width: 100px;" type="primary" @click="formValidate">提 交</Button>
            <Button style="width: 100px; margin-left: 20px;" @click="formCancel">取 消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- 提交确认框 -->
    <Modal title="提交确认" v-model="isModalVisible" @ok="formSubmit" @cancel="isModalVisible = false" centered>
      <p>即将提交厂商信息，是否确认？</p>
    </Modal>
    
  </div>
</template>

<script>
import * as ruoyi from '@/utils/ruoyi'
import { Message } from '@uni/vue';
import { addFirm, updateFirm } from "@/api/doapp/firm";

export default {
  name: "app",
  props: {
    firmId: {
      type: Number,
      default: 0
    },
    currRow: {
      default: () => {}
    }
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      isInCatalog: '否',
      form: {
        firmName: this.currRow.firmName,
        address: this.currRow.address,
        remark: this.currRow.remark,
        isInCatalog: this.currRow.isInCatalog ? '是' : '否',
        linkMan: this.currRow.linkMan,
        linkPhone: this.currRow.linkPhone
      },
      formRules: {
        firmName: [
          { required: true, message: '请输入厂商名称' },
        ],
        address: [
          { required: true, message: '请输入厂商地址' },
        ],
        linkMan: [
          { required: true, message: '请输入厂商联系人' },
        ],
        linkPhone: [
          { required: true, message: '请输入联系人电话' },
        ]
      },
      isModalVisible: false
    }
  },
  mounted: function () {
    // console.log("mounted firmId: ", this.firmId);
    // console.log("mounted currRow: ", this.currRow);
  },
  methods: {
    formValidate: function () {
      this.$refs.formRef.submit();
    },
    formCancel: function () {
      // this.$refs.formRef.reset();
      this.handleCancel();
    },
    formFinish: function (formValues) {
      this.form = formValues;
      // this.isModalVisible = true;
      this.formSubmit();
    },
    formSubmit: async function () {
      // 公共属性
      this.form.createBy = this.$store.state.user.name;
      this.form.createTime = ruoyi.parseTime(Date.now());
      this.form.updateBy = this.$store.state.user.name;
      this.form.updateTime = ruoyi.parseTime(Date.now());

      // 业务属性
      this.form.isInCatalog = this.form.isInCatalog === '是' ? true : false;

      // 提交表单请求
      this.isModalVisible = false;
      console.log("this.form: ", this.form);

      if (this.firmId) {
        // 修改
        this.form.firmId = this.firmId;
        const rs = await updateFirm(this.form);
        if (rs.code !== 200) return Message.error({ text: '修改厂商信息失败：' + rs.msg });
        Message.success({ text: '修改厂商信息完成' });
        this.handleCancel();

      } else {
        // 新增
        const rs = await addFirm(this.form);
        if (rs.code !== 200) return Message.error({ text: '新增厂商信息失败：' + rs.msg });
        Message.success({ text: '新增厂商信息完成' });
        this.handleCancel();
      }
    },
    handleCancel: function () {
      this.$emit('handleCancel');
    }
  }
}
</script>

<style scoped>
  .w {
    background-color: #F9FAFB;
  }

  /* 标题 */
  /* .title-area {
    height: 36px;
    background-color: #E9EBF0;
  } */
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }
</style>
